<template>
	<view >
		<view class="s_box"  @click.stop="handlerClose" :class="{'show_menu_box':showMenu}">
			<view class="content" v-if="posterUrl!=''" @click.stop="noDone">
				<image :src="posterUrl" @load="handlerLoadingImage" mode="aspectFit" alt=""/><br/>
				<span>长按图片可保存海报</span>
			</view>
			<view class="wechatText" v-if="showWechatText">
				<span>点击右上角“···”按钮 <br/>  分享给好友</span>
				<img src="@/static/guess/top-right.png"/>
			</view>
		</view>
		<!-- <poster v-if="show" :painting="painting" @Url="handlerUrl"></poster>	 -->
		<view v-if="showMenu" class="share_menu">
			<span class="title">
				分享到
			</span>
			<view class="plat">
				<view  v-for="(item,index) in menuData" @click="shareWechat(index)">
					<img :src="qiniuUrl+item.icon"></img>
					<span>{{item.title}}</span>
				</view>
			</view>
			<span class="back">
				<span @click="handlerBack">取消</span>
			</span>
		</view>
	</view>
</template>

<script>
	import {LoginApp,isQianfan,proxyShareFun,isWeiXin,shareApp} from '@/until/QFH5.js'
	import {mapGetters} from 'vuex'
	import {checkHostOrImage} from '@/until/tool'
	export default{
		props:{
			data:{
				require:true
			},
			posterShow:{
				default:true
			}
		},
		
		computed:{
			...mapGetters({qiniuUrl:'qiniuUrl'})
		},
		data(){
			return{
				show:false,
				pageData:{},
				posterUrl:"",
				painting:{
					background:"",
					qrcode:window.location.href,//二维码
					qrleft: 0,//左距离
					qrtop: 0,//顶部距离
					qrwidth: 200,//二维码宽高
					qrheight: 200,
					type:'text',
				},
				menuData:[{title:'微信好友',icon:"icon20.png"},
				{title:'朋友圈',icon:"icon23.png"}],
				showMenu:false,
				showWechatText:false,
			}
		},
		methods:{
			noDone(){ },
			//生产回调
			handlerUrl(url){
				//回调
				this.posterUrl=url
				this.show=false
				// alert(url)
				let _this = this
				if(isQianfan()){
					this.showMenu = true
					let data = this.pageData
					
					QFH5.setShareInfo('标题',url,'描述',window.location.href,(state,data)=>{
					                            //回调是所有分享操作的回调，无论从右上角菜单发起或openShareDialog或openShare发起，分享完后一定执行此回调
					                            if(state==1){
					                                //分享成功
					                                // alert(data.type);//分享平台
					                            }else{
					                                //分享失败
					                                // alert(data.error);//失败原因
					                            }
					                        },2,'')

				}
			},
			handlerLoadingImage(){
				uni.hideLoading()
			},
			//返回上一页
			back(){
				uni.navigateBack({})
			},
			handlerBack(){
				// this.showMenu = false
				
				this.handlerClose()
			},
			shareWechat(val){
				if(val==0){
					QFH5.openShare(2)
				}else{
					QFH5.openShare(1)
				}
				// let data = this.pageData
				// shareFun(data.title,this.poster,data.desc,window.location.href,null,()=>{})
			},
			handlerClose(){
				this.$emit('close')
			}
		},
		mounted() {
			this.pageData = JSON.parse(JSON.stringify(this.data))
			let data = JSON.parse(JSON.stringify(this.data))
			let {poster,poster_img,desc,title,image} = data.settings
			//后端自动拼域名导致 无图会有一个域名  需要匹配域名后是否存在地址
			if(checkHostOrImage(poster_img) && this.posterShow){
				// let text = window.location.href
				// this.painting={
				// 	background:data.poster,
				// 	qrcode:text,//二维码
				// 	qrleft: data.pos_x+"%",//左距离
				// 	qrtop: data.pos_y+"%",//顶部距离
				// 	qrwidth: 200,//二维码宽高
				// 	qrheight: 200,
				// 	type:'text',
				// }
				// this.show = true
				
				let _this = this
				uni.showLoading({
					title:'海报生成中'
				})
				this.posterUrl = poster_img
				if(isQianfan()){
					this.showMenu = true
					proxyShareFun(title,poster_img,desc,window.location.href,null,()=>{})
				}
			}else{
				console.log('title',title)
				proxyShareFun(title,image,desc,window.location.href,null,()=>{})
				if(isQianfan()){
					this.handlerClose()
					QFH5.openShareDialog()
				}else if(isWeiXin()){
					this.showWechatText = true
				}else{
					this.handlerClose()
				}
				
			}
			
		},
		onLoad(op){},
		onShow(){}
	}
</script>

<style lang="scss" scoped>
	.s_box{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,.7);
		text-align: center;
		.content{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			
			&>image{
				width: 560rpx;
				height: 80vh;
			}
			&>span{
				color: #fff;
				font-size: 34rpx;
			}
		}
		.poster{
			width: 560rpx;
			min-height: 740rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			
		}
		.poster{
			background-repeat: no-repeat;
		}
		.wechatText{
			line-height: 0rpx;
			position: relative;
			width: 100%;
			height: 100%;
			&>span{
				color: #FFFFFF;
				font-size: 40rpx;
				font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
				line-height: 60rpx;
				width: 400rpx;
				height: 242rpx;
				position: absolute;
				// left: 50%;
				// top: 50%;
				// transform: translate(-50%,-50%);
				top: 164rpx;
				right: 46rpx;
				letter-spacing: 1.5rpx;
			}
			&>img{
				width: 84rpx;
				height: 115rpx;
				position: absolute;
				top: 27rpx;
				right: 60rpx;
				// transform: rotate(-40deg);
				// animation: bigger 1.5s linear infinite;
			}
		}
		
	}
  .show_menu_box{
    .content{
      top: 38% !important;
      &>image{
        width: 560rpx;
        height: 65vh;
      }
    }

  }
	.share_menu{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 350rpx;
		z-index: 100;
		background: #FFFFFF;
		box-shadow: 0px -5px 30px 1px rgba(153, 153, 153, 0.16);
		border-radius: 45px 45px 0px 0px;
		padding: 20rpx 0 0 0;
		.title,.back{
			display: block;
			width: 440rpx;
			margin:0 auto 0;
			font-size: 34rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			text-align: center;
		}
		.back{
			margin-top: 0rpx;
		}
		.plat{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			width: 440rpx;
			/*height: 136rpx;*/
			margin:0rpx auto 20rpx;
			
			&>view{
				// border: 1rpx solid red;
				width: 160rpx;
				height: 190rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				text-align: center;
				// &:not(:first-child){
				// 	margin-left: 10rpx;
				// }
				img{
					width: 160rpx;
					height: 160rpx;
					// border-radius: 50%;
					// background: linear-gradient(147deg, #6ED380 0%, #92E975 100%);
					
					// box-shadow: 0px 6px 20px 1px rgba(196, 232, 85, 0.5);
				}
				span{
					display: block;
					// margin-top: 12rpx;
					line-height: 24rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
			}
			
		}
	}
	@keyframes bigger{
		0% {
		      transform: scale(1);
		    }
		
		    25% {
		      transform: scale(1.05);
		    }
		
		    50% {
		      transform: scale(1);
		    }
		
		    75% {
		      transform: scale(1.05);
		    }
	}
</style>
